<template>
    <div class="common-layout">
        <el-container>
            <el-header class="bg-blue-600 ">
                <el-row :gutter="20" class="flex conten-home" style="height: 100%;">
                    <el-col :span="5" class="text-1xl text-light-200">
                        <div class="grid-content ep-bg-purple " />
                        <el-icon>
                            <Compass />
                        </el-icon>
                        <span>七月烘培</span>
                    </el-col>

                    <el-col :span="19" style="display: flex">
                        <div class="flex justify-start items-center flex-1">
                            <el-icon @click="collapse">
                                <Fold v-if="!isCollapse" />
                                <Expand v-else />
                            </el-icon>
                        </div>

                        <div class="flex justify-between items-center flex-2">
                            <el-icon class="mr-5">
                                <FullScreen />
                            </el-icon>
                            <div class="user conten-home">
                                <img class="w-10 h-10 rounded-3xl mr-2"
                                    src="https://img0.baidu.com/it/u=1217304799,3113310756&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685120400&t=d4273df788ed980845b8681babdddcda"
                                    alt="">
                                admin
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside  :width="asideHeight" style="height: 100vh;">
                    <Menu @openpage="openTags" :isCollapse="isCollapse" :isBig="isBig" />
                </el-aside>
                <el-main class="bg-gray-100">
                    <div class="flex justify-between">
                        <div>
                            <el-tag v-for="(item, index) in tags" style="cursor: pointer" size="large" :key="index"
                                class="mx-1" :effect="effectActive == item.path ? 'dark' : 'plain'"
                                :closable="tags.length <= 1||item.name=='控制台' ? false : true" @close.native="removeTag(index, item.path)"
                                @click="routerPath(item.path)">
                                {{ item.name }}
                            </el-tag>
                        </div>
                        <div>
                            <el-dropdown size="small">
                                <el-button>
                                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="close(true)">关闭全部</el-dropdown-item>
                                        <el-dropdown-item @click="close(false)">关闭其他</el-dropdown-item>

                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {ref, toRaw, watch, onMounted, onUnmounted  } from 'vue';
import Menu from "@/components/Menu.vue"
import jsCookie from 'js-cookie';
import {
    useRouter
} from "vue-router";
const router = useRouter();
const isBig = ref(window.innerWidth<768?true:false)
   // 创建一个响应式引用来存储窗口宽度
   const windowWidth = ref(window.innerWidth);

// 定义一个函数来更新窗口宽度
const updateWidth = () => {
  windowWidth.value = window.innerWidth;
};

// 组件挂载后添加事件监听器
onMounted(() => {
  window.addEventListener('resize', updateWidth);
});

// 组件卸载前移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateWidth);
});

// 使用 watch 来实时监听 windowWidth 的变化
watch(windowWidth, (newVal, oldVal) => {
//   console.log(`窗口宽度从 ${oldVal}px 变化到 ${newVal}px`);
  // 在这里执行你需要的逻辑，比如响应窗口大小变化
  if (newVal < 768) {
  console.log('可能是手机');
  isBig.value=true
  asideHeight.value='50px'

} else {
  console.log('可能是电脑');
  isBig.value=false

}
});
const isCollapse = ref(false)
let asideHeight = ref('200px')
const tags = ref([])
if (!jsCookie.get('tagsRouter')) {
    jsCookie.set('tagsRouter', "/home/homefilled")
}
let tagRouter = jsCookie.get('tagsRouter')
let effectActive = ref(tagRouter)
router.push(tagRouter)


// 接受子组件传过来的数据
const openTags = (bool) => {
    tags.value = bool;
    effectActive.value = jsCookie.get('tagsRouter')
    console.log(effectActive.value);

}
// 菜单栏展开
const collapse = () => {
    isBig.value = !isBig.value
    if(toRaw(isCollapse)._value){
        asideHeight.value='200px'
    }else{
        asideHeight.value='50px'
    }
        // console.log(toRaw(isCollapse)._value);
}

// 删除tag
const removeTag = (index, path) => {
    tags.value.splice(index, 1)
    jsCookie.set('tags', JSON.stringify(tags.value))

    if (tags.value.length == 1) {
        jsCookie.set('tagsRouter', tags.value[0].path)
    } else {
        jsCookie.set('tagsRouter', tags.value[index - 1].path)
    }
    effectActive.value = jsCookie.get('tagsRouter')


    router.push(effectActive.value)

}
// 点击tags路由跳转
const routerPath = (path) => {
    effectActive.value = path
    jsCookie.set('tagsRouter', effectActive.value)
    router.push(path);
}
// 关闭所以+关闭其他
const close = (flag) => {
    if (flag) {
        jsCookie.set('tags', JSON.stringify([{ path: '/home/homefilled', name: '控制台' }]))
        tags.value = [{ path: '/home/homefilled', name: '控制台' }]
        jsCookie.set('tagsRouter', '/home/homefilled')
        effectActive.value="/home/homefilled"
        router.push('/home/homefilled')

    } else {
        let tagss = jsCookie.get('tags')
        console.log(JSON.parse(tagss));
        let tagsRouter = jsCookie.get('tagsRouter')
        // console.log(JSON.parse(tags),tagsRouter);

        let arrs = JSON.parse(tagss).filter(item => item.path == tagsRouter)
        tags.value = [{ path: '/home/homefilled', name: '控制台' },...arrs]

        jsCookie.set('tags', JSON.stringify(tags.value))
        // console.log(JSON.stringify(arrs));
        router.push(jsCookie.get('tagsRouter'))
    }
}
</script>

<style  scoped>
.conten-home {
    @apply flex justify-center items-center
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>